<template>
    <div class="m-root" v-loading="loading">
        <div class="title">{{ detailsInfo.conductStandardName || '备忘录' }}</div>
        <div class="no">
            编号：
            <div v-if="!isEdit">{{ detailsInfo.conductStandardNo || '' }}</div>
            <el-input v-else v-model="detailsInfo.conductStandardNo" placeholder="请输入" style="width: 250px" />
        </div>
        <div class="table-root">
            <el-form ref="dialogFormRef" :rules="rules" :model="detailsInfo" label-width="160px" :disabled="!isEdit">
                <el-form-item label="使用单位名称" prop="usingUnit">
                    <el-input v-model="detailsInfo.usingUnit" placeholder="请输入" />
                </el-form-item>
                <div class="flex-stb">
                    <el-form-item label="安装地点" prop="installAddress" style="flex: 1">
                        <el-input v-model="detailsInfo.installAddress" placeholder="请输入" autosize type="textarea" />
                    </el-form-item>
                    <el-form-item label="设备品种" prop="varietyName" style="flex: 1">
                        <el-input v-model="detailsInfo.varietyName" placeholder="请输入" />
                    </el-form-item>
                </div>
                <el-form-item label="唯一性编号" prop="uniformSocialCreditNo">
                    <el-input v-model="detailsInfo.uniformSocialCreditNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="检测依据" prop="conductStandardName">
                    <el-input v-model="detailsInfo.conductStandardName" placeholder="请输入" :disabled="true" />
                </el-form-item>

                <el-form-item label="不符合情况及相关建议">
                    <div style="width: 100%;margin-left: 20px;margin-top: 20px;">
                        <el-radio-group v-model="detailsInfo.suggest">
                            <div style="width: 100%"><el-radio :label="1">无</el-radio></div>
                            <div style="width: 100%"><el-radio :label="2">该电梯存在不符合，建议立即整改</el-radio></div>
                            <div style="width: 100%"><el-radio :label="3">该电梯存在较严重的不符合，建议立即停用整改</el-radio></div>
                        </el-radio-group>
                    </div>
                    <div style="padding: 10px 20px;">
                        <div v-for="(item, idx) in detailsInfo.dbtDetectionResultMemoVOList" :key="idx">
                            {{ item.chooseResult }}： {{ item.detectionItemCode }}。{{ item.remark }}
                        </div>
                    </div>
                    <div class="item-div status-root">
                        <div class="item-title">单位拒绝签字情况说明</div>
                        <el-input v-model="detailsInfo.name" placeholder="请输入" :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea" show-word-limit maxlength="200" />
                    </div>
                </el-form-item>

                <div class="flex-stb">
                    <el-form-item label="检测人员" prop="staffNameList" style="flex: 1">
                        <div v-if="!isEdit" style="padding-left: 10px;">
                            <span v-for="(item, idx) in detailsInfo.staffNameList" :key="idx">
                                {{ item }}{{ idx < detailsInfo.staffNameList.length - 1 ? ',' : "" }} </span>
                        </div>
                        <PersonSelect v-else :isNecessary="true" :noShowImg="true" @updateList="updateWorkerList" />
                    </el-form-item>
                    <el-form-item label="检测日期" prop="detectionDate" style="flex: 1">
                        <el-date-picker v-model="detailsInfo.detectionDate" type="date" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" style="width: 100%" placeholder="请选择" />
                    </el-form-item>
                </div>

                <el-form-item label="检测单位名称" prop="organizeName" style="flex: 1">
                    <el-input v-model="detailsInfo.organizeName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="核准证号/许可证号" prop="permitCertificateNo" style="flex: 1">
                    <el-input v-model="detailsInfo.permitCertificateNo" placeholder="请输入" />
                </el-form-item>

                <div class="flex-stb">
                    <el-form-item label="使用单位代表" prop="customerName" style="flex: 1">
                        <el-input v-model="detailsInfo.customerName" placeholder="请输入" style="width: 160px" />
                    </el-form-item>
                    <el-form-item label="电话" prop="phone" label-width="80px" style="flex: 1">
                        <el-input v-model="detailsInfo.phone" placeholder="请输入" style="width: 160px" maxlength="11" />
                    </el-form-item>
                    <el-form-item label="签收日期" prop="signTime" label-width="80px" style="flex: 1">
                        <el-date-picker v-model="detailsInfo.signTime" placeholder="请选择" type="date" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" style="width: 160px" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import PersonSelect from '@/components/PersonSelect'
import {
    apiGetMemorandumDetails,
} from "@/api/detection";
const { proxy } = getCurrentInstance();

const emit = defineEmits(['infoChange'])

const loading = ref(false)
const detailsInfo = ref({
    conductStandardName: "《电梯自行检测规则》",
    conductStandardNo: 'TSG T7008-2023'
})

const rules = ref({})

const props = defineProps({
    infoId: {
        type: Number,
        default: ""
    },
    isEdit: {
        type: Boolean,
        default: false
    },
});

watch(() => props.infoId, value => {
    getInfo()
})


const getInfo = () => {
    if (props.infoId && !props.isEdit) {
        loading.value = true;
        apiGetMemorandumDetails(props.infoId.recordId).then(res => {
            loading.value = false;
            if (res.data) {
                if (res.data.dbtDetectionResultMemoVOList.length > 0) {
                    res.data.suggest = 2
                }
                res.data.installAddress = res.data.usingAddress
                detailsInfo.value.infoIds = props.infoId
                detailsInfo.value = res.data;
            }
        }).catch(err => {
            loading.value = false;
        });
    } else {
        detailsInfo.value.infoIds = props.infoId
    }
}

getInfo()


const checkInput = () => {
    let isOk = true
    if (!detailsInfo.value.usingUnit) {
        isOk = false
        proxy.$modal.msgError("请输入使用单位");

    } else if (!detailsInfo.value.installAddress) {
        isOk = false
        proxy.$modal.msgError("请输入设备安装地址");

    } else if (!detailsInfo.value.varietyName) {
        isOk = false
        proxy.$modal.msgError("请输入设备品种名称");

    } else if (!detailsInfo.value.uniformSocialCreditNo) {
        isOk = false
        proxy.$modal.msgError("请输入唯一性编号");

    } else if (!detailsInfo.value.suggest) {
        isOk = false
        proxy.$modal.msgError("请选择不符合情况及相关建议");

    } else if (!detailsInfo.value.staffIds || detailsInfo.value.staffIds.length == 0) {
        isOk = false
        proxy.$modal.msgError("请选择检测人员");

    } else if (!detailsInfo.value.organizeName) {
        isOk = false
        proxy.$modal.msgError("请输入检测单位名称");

    } else if (!detailsInfo.value.detectionDate) {
        isOk = false
        proxy.$modal.msgError("请选择检测日期");

    } else if (!detailsInfo.value.uniformSocialCreditNo) {
        isOk = false
        proxy.$modal.msgError("请输入核准证号/许可证号");

    } else if (!detailsInfo.value.detectionDate) {
        isOk = false
        proxy.$modal.msgError("请选择检测日期");
    }
    return isOk
}

const updateWorkerList = (list) => {
    let staffIds = []
    if (list) {
        list.map(item => {
            staffIds.push(item.id)
        })
    }
    detailsInfo.value.staffIds = staffIds.join(',')
}

const getInputInfo = () => {
    let isOk = checkInput()
    let info = { ...detailsInfo.value }
    info.detectionDate = info.detectionDate + ' 00:00:00'
    info.staffNameList = info.staffIds
    return {
        isOk,
        info
    }
}

defineExpose({
    getInputInfo
})

</script>
  
<style lang="scss" scoped>
::v-deep(.el-input__wrapper) {
    box-shadow: none;
}

::v-deep(.el-form-item) {
    min-height: 50px;
    margin-bottom: 0 !important;
    border-bottom: 1px #ddd solid;
}

.m-root {
    padding-bottom: 30px;


    ::v-deep(.el-form-item__label) {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        border-left: 1px #ddd solid;
        padding: 0 !important;
    }

    ::v-deep(.el-form-item__content) {
        border-left: 1px #ddd solid;
    }

    .title {
        text-align: center;
        font-size: 20px;
        color: #000;
        padding: 20px 0;
        font-weight: bold;
    }

    .no {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 15px;
        color: #000;
        padding: 20px 0;
        font-weight: bold;

        div {
            padding: 3px 30px;
            border-bottom: 1.5px #666 solid;
        }
    }

    .table-root {
        margin: 10px;
        border: 1px #ddd solid;
    }

    .item-div {

        .item-title {
            color: #666;
            font-size: 14px;
            font-weight: bold;
            margin: 10px 0;
        }
    }

    .status-root {
        width: 100%;
        background: #f8f8f8;
        margin: 10px 20px 20px 20px !important;
        padding: 20px !important;
    }

    .status-root .el-input__wrapper {
        background-color: transparent;
    }
}
</style>
  